/**
 * Buttons
 */

// Main button styling
%buttons {
  -webkit-appearance: none;
  display: inline-block;
  border: $button-border-width $button-border-style $button-border-color;
  border-radius: $button-border-radius;
  background: $button-background;
  color: $button-color;
  font-weight: $button-font-weight;
  font-family: $button-font-family;
  font-size: $button-font-size;
  text-transform: $button-text-transform;
  padding: 0.75rem 1.25rem;
  margin: 0 0 0.5rem 0;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

// Buttons on hover
%buttons-hover {
  border: $button-border-width $button-border-style darken($button-border-color, 10%);
  background: $button-background-hover;
  color: $button-color;
  text-decoration: none;
}

// Buttons on focus
%buttons-focus {
  border: $button-border-width $button-border-style darken($button-border-color, 10%);
  background: darken($button-background, 10%);
  color: $button-color;
  text-decoration: none;
}

// Apply styles to .button class, button element, and button-based inputs
#{$buttons} {
  @extend %buttons;

  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  &:hover {
    @extend %buttons-hover;
  }

  &:focus,
  &:active {
    @extend %buttons-focus;
  }
}

// Secondary button color
.accent-button,
a.accent-button {
  color: $accent-button-color;
  border: 1px solid $accent-button-background;
  background: $accent-button-background;

  &:hover,
  &:focus,
  &:active {
    color: $accent-button-color-hover;
    border: 1px solid darken($accent-button-background, 10%);
    background: darken($accent-button-background, 10%);
  }
}

// Muted buttons
.muted-button,
a.muted-button {
  background: $muted-background;
  border: $muted-border;
  color: $muted-color;

  &:hover,
  &:focus,
  &:active {
    color: $muted-color-hover;
    border: $muted-border-hover;
    background: $muted-background-hover;
  }
}

// Round buttons
.round-button,
a.round-button {
  border-radius: $round-buttons;
}

// Square buttons
.square-button,
a.square-button {
  border-radius: 0;
}

// Full width buttons (block level)
.full-button,
a.full-button {
  display: block;
  width: 100%;
}
